<template>
    <div class="app-wrapper">
        <!-- 导航栏 -->
        <nav-bar class="navbar" :is-mobile="isMobile"></nav-bar>

        <!-- 轮播图 -->
        <el-carousel height="400px" v-if="!isMobile">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                <div class="carousel-content">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.description }}</p>
                </div>
            </el-carousel-item>
        </el-carousel>

        <!-- 移动端轮播图 -->
        <el-carousel height="200px" v-else>
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                <div class="carousel-content-mobile">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.description }}</p>
                </div>
            </el-carousel-item>
        </el-carousel>

        <!-- 系统简介 -->
        <section class="system-intro">
            <div class="container">
                <h2 class="section-title">东软环保公众监督系统</h2>
                <p class="intro-text">
                    东软环保公众监督系统致力于建立环保公众监督平台，拓宽监督渠道，增加环保工作透明度，
                    不断完善公众监督机制，切实增强环境保护实效。系统通过汇总公众监督员提供的空气质量信息，
                    由网格员进行实地检测，最终为环保决策者提供数据支持。
                </p>
            </div>
        </section>

        <!-- 功能模块 -->
        <section class="features">
            <div class="container">
                <h2 class="section-title">系统功能模块</h2>
                <div class="feature-grid">
                    <!-- 公众监督员端 -->
                    <el-card class="feature-card" shadow="hover" v-loading="loading" @click="goToPage('/neps')">
                        <div class="card-icon">
                            <el-icon>
                                <User />
                            </el-icon>
                        </div>
                        <h3 class="card-title">公众监督员端 (NEPS)</h3>
                        <p class="card-desc">
                            普通公众可注册成为监督员，提交空气质量观测信息，
                            浏览历史反馈记录，参与环保监督。
                        </p>
                    </el-card>

                    <!-- 网格员端 -->
                    <el-card class="feature-card" shadow="hover" v-loading="loading" @click="goToPage('/nepg')">
                        <div class="card-icon">
                            <el-icon>
                                <MapLocation />
                            </el-icon>
                        </div>
                        <h3 class="card-title">网格员端 (NEPG)</h3>
                        <p class="card-desc">
                            专业网格员接收任务指派，实地检测空气质量数据，
                            提交实测结果，完成监督闭环。
                        </p>
                    </el-card>

                    <!-- 系统管理端 -->
                    <el-card class="feature-card" shadow="hover" v-loading="loading" @click="goToPage('/nepm')">
                        <div class="card-icon">
                            <el-icon>
                                <Setting />
                            </el-icon>
                        </div>
                        <h3 class="card-title">系统管理端 (NEPM)</h3>
                        <p class="card-desc">
                            系统管理员管理监督数据，指派检测任务，
                            统计分析空气质量数据，确保系统正常运行。
                        </p>
                    </el-card>

                    <!-- 决策者端 -->
                    <el-card class="feature-card" shadow="hover" v-loading="loading" @click="goToPage('/nepv')">
                        <div class="card-icon">
                            <el-icon>
                                <Monitor />
                            </el-icon>
                        </div>
                        <h3 class="card-title">决策者端 (NEPV)</h3>
                        <p class="card-desc">
                            可视化大屏展示空气质量统计数据，
                            为环保决策提供数据支持和可视化依据。
                        </p>
                    </el-card>
                </div>
            </div>
        </section>

        <!-- 项目优势 -->
        <section class="advantages">
            <div class="container">
                <h2 class="section-title">项目优势</h2>
                <div class="advantage-list">
                    <div class="advantage-item">
                        <el-icon class="advantage-icon">
                            <Message />
                        </el-icon>
                        <h3>全民参与环保监督</h3>
                        <p>拓宽监督渠道，让公众成为环保监督的重要力量</p>
                    </div>
                    <div class="advantage-item">
                        <el-icon class="advantage-icon">
                            <Checked />
                        </el-icon>
                        <h3>精准数据支撑</h3>
                        <p>专业检测与公众反馈结合，提供准确的空气质量数据</p>
                    </div>
                    <div class="advantage-item">
                        <el-icon class="advantage-icon">
                            <Monitor />
                        </el-icon>
                        <h3>高效管理平台</h3>
                        <p>系统化任务分配与数据管理，提高环保工作效率</p>
                    </div>
                    <div class="advantage-item">
                        <el-icon class="advantage-icon">
                            <Suitcase />
                        </el-icon>
                        <h3>科学决策支持</h3>
                        <p>可视化数据分析，为环保政策制定提供科学依据</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="app-footer">
            <div class="container">
                <p>东软环保公众监督系统 &copy; {{ currentYear }} 版权所有</p>
                <p>致力于环境保护信息化建设，推动生态文明发展</p>
            </div>
        </footer>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { User, MapLocation, Setting, Monitor, Message, Suitcase } from '@element-plus/icons-vue';
import NavBar from '../../components/NavBar.vue';

const router = useRouter();
const isMobile = ref(false);
const loading = ref(false);
const currentYear = new Date().getFullYear();

document.title = "东软环保公众监督系统";
// 轮播图数据
const carouselItems = [
    {
        title: '全民参与，共建绿色家园',
        description: '东软环保公众监督系统让每个人都能成为环保监督员，共同守护空气质量',
        img: ''
    },
    {
        title: '专业检测，精准数据',
        description: '网格员实地检测，提供准确的AQI数据，为环保工作提供科学依据',
        img: ''
    },
    {
        title: '智能管理，高效决策',
        description: '系统化数据管理与可视化分析，助力环保决策者制定科学政策',
        img: ''
    }
];

// 检测屏幕尺寸，判断是否为移动端
onMounted(() => {
    isMobile.value = window.innerWidth < 1000;
    window.addEventListener('resize', () => {
        isMobile.value = window.innerWidth < 1000;
    });
});

// 页面跳转
const goToPage = (path) => {
    loading.value = true;
    setTimeout(() => {
        router.push(path);
        loading.value = false;
    }, 300);
};
</script>

<style scoped>
/* 样式部分保持不变 */
.app-wrapper {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    color: #333;
    line-height: 1.5;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

.section-title {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    font-size: 28px;
    color: #303133;
}

.section-title:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 50px;
    height: 3px;
    background-color: #409EFF;
    transform: translateX(-50%);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 轮播图样式 */
.carousel-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    color: white;
}

.carousel-content h2 {
    font-size: 36px;
    margin-bottom: 15px;
    font-weight: bold;
}

.carousel-content p {
    font-size: 18px;
    max-width: 800px;
}

.carousel-content-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    color: white;
}

.carousel-content-mobile h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

.carousel-content-mobile p {
    font-size: 14px;
    max-width: 300px;
}

/* 系统简介样式 */
.system-intro {
    background-color: #f5f7fa;
    padding: 60px 0;
}

.intro-text {
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: #606266;
}

/* 功能模块样式 */
.features {
    padding: 60px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-card {
    height: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #409EFF;
    color: white;
    border-radius: 50%;
    font-size: 32px;
    margin: 0 auto 20px;
}

.card-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
    color: #303133;
}

.card-desc {
    text-align: center;
    color: #606266;
    font-size: 15px;
}

/* 项目优势样式 */
.advantages {
    background-color: #f5f7fa;
    padding: 60px 0;
}

.advantage-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.advantage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 250px;
}

.advantage-icon {
    font-size: 48px;
    color: #409EFF;
    margin-bottom: 15px;
}

.advantage-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #303133;
}

.advantage-item p {
    font-size: 15px;
    color: #606266;
}

/* 页脚样式 */
.app-footer {
    background-color: #303133;
    color: #fff;
    padding: 30px 0;
    text-align: center;
}

.app-footer p {
    margin: 5px 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .section-title {
        font-size: 24px;
    }

    .intro-text,
    .card-desc,
    .advantage-item p {
        font-size: 14px;
    }

    .feature-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .advantage-list {
        gap: 20px;
    }
}
</style>